import React, { Component } from 'react';
import { connect } from 'react-redux';
import clsx from 'clsx';
import { Button, TextField, AppBar, Toolbar, Paper, Divider, Drawer, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
import {
  Search,
  PhonelinkSetup,
  Refresh,
  Home,
  PermMediaOutlined,
  People,
  DnsRounded,
  PhotoSizeSelectActual,
  Public,
  SettingsEthernet,
  SettingsInputComponent,
  Timer,
  Settings
} from '@material-ui/icons';
import { Omit } from '@material-ui/types';
import { accountExistence } from './fallingmanagemenu.reducer';
import { login } from 'app/shared/reducers/authentication';
import { IRootState } from 'app/shared/reducers';

export interface IFallingManageMenuNavigatorProps extends StateProps, DispatchProps {}
export const Login = (props: IFallingManageMenuNavigatorProps) => {
  const { ...other } = props;
};
class FallingManageMenuNavigator extends React.Component<IFallingManageMenuNavigatorProps> {
  render() {
    const categories = [
      {
        id: 'Develop',
        children: [
          { id: 'Authentication', icon: <People />, active: true },
          { id: 'Database', icon: <DnsRounded /> },
          { id: 'Storage', icon: <PermMediaOutlined /> },
          { id: 'Hosting', icon: <Public /> },
          { id: 'Functions', icon: <SettingsEthernet /> },
          { id: 'ML Kit', icon: <SettingsInputComponent /> }
        ]
      },
      {
        id: 'Quality',
        children: [
          { id: 'Analytics', icon: <Settings /> },
          { id: 'Performance', icon: <Timer /> },
          { id: 'Test Lab', icon: <PhonelinkSetup /> }
        ]
      }
    ];
    return (
      <Drawer variant="permanent">
        <List disablePadding>
          <ListItem>Paperbase</ListItem>
          <ListItem>
            <ListItem>
              <Home />
            </ListItem>
            <ListItemText>Project Overview</ListItemText>
          </ListItem>
          {categories.map(({ id, children }) => (
            <React.Fragment key={id}>
              <ListItem>
                <ListItemText>{id}</ListItemText>
              </ListItem>
              {children.map(({ id: childId, icon, active }) => (
                <ListItem key={childId} button>
                  <ListItemIcon>{icon}</ListItemIcon>
                  <ListItemText>{childId}</ListItemText>
                </ListItem>
              ))}
              <Divider />
            </React.Fragment>
          ))}
        </List>
      </Drawer>
    );
  }
}
const mapStateToProps = ({ authentication }: IRootState) => ({
  isAuthenticated: authentication.isAuthenticated,
  redirectMessage: authentication.redirectMessage,
  account: authentication.account,
  errorMessage: authentication.errorMessage,
  sessionHasBeenFetched: authentication.sessionHasBeenFetched,
  idToken: authentication.idToken,
  logoutUrl: authentication.logoutUrl
});

const mapDispatchToProps = { login, accountExistence };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FallingManageMenuNavigator);
